---
title: Breadcrumbs
description: Breadcrumb components built with Tailwind CSS v4. These responsive navigation breadcrumbs help users track their location within websites and applications. Perfect for ecommerce, dashboards, and multi-level navigation. Customizable with dividers and icons, optimized for SEO and accessibility.
category: application
emoji: 🍞
slug: breadcrumbs
wrapper: h-[200px]
terms:
  - link
  - navigation
components:
  - { title: 'Base', dark: true }
  - { title: 'Base with home icon', dark: true }
  - { title: 'Slash divider', dark: true, contributors: ['mohdahsanrazakhan'] }
  - { title: 'Slash divider with home icon', dark: true, contributors: ['mohdahsanrazakhan'] }
  - { title: 'Grouped with chevron divider', dark: true }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Breadcrumb Components

  <p>{frontmatter.description}</p>
</CollectionHeader>
